<template>
  <el-card class="goodsList">
    <!-- 查询部分 -->
    <div class="searchForm">
      <el-form :inline="true" :model="searchForm" size="mini">
        <el-form-item label="名称">
          <el-input
            v-model="searchForm.p"
            placeholder="请输入"
            @keyup.enter.native="m_handleFilter"
          ></el-input>
        </el-form-item>
        <el-form-item label="角色">
          <el-input
            v-model="searchForm.type"
            placeholder="请输入"
            @keyup.enter.native="m_handleFilter"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="m_handleFilter">查询</el-button>
          <el-button type="primary" @click="m_handleClear">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="hh-btnbox">
      <!-- <el-input-number v-model="num" :min="1" :max="10" label="描述文字"></el-input-number> -->
      <el-button size="mini" @click="handleAddGoods">新增</el-button>
    </div>
    <!-- 查询部分！！！ -->

    <!-- 列表 -->
    <div class="table-box">
      <el-table
        ref="multipleTable"
        :data="tableData.list"
        highlight-current-row
        style="width: 100%"
        border
        size="mini"
        stripe
        @selection-change="m_handleSelectionChange"
      >
        <el-table-column
          align="center"
          width="55"
          type="selection"
          fixed="left"
        ></el-table-column>
        <el-table-column
          align="center"
          type="index"
          width="50"
          label="序号"
        ></el-table-column>
        <el-table-column
          v-for="item in tableData.headList"
          :key="item.name"
          :label="item.title"
          :prop="item.name"
          :show-overflow-tooltip="true"
          align="center"
        >
          <template slot-scope="scope">
            <div v-if="item.name == 'images'"></div>
            <div v-else>{{ scope.row[item.name] }}</div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作" fixed="right">
          <template slot-scope="scope">
            <el-button size="mini" @click="m_handleUpImg(scope.row)"
              >上传图片</el-button
            >
            <el-button size="mini" @click="handleEditGoods(scope.row)"
              >编辑</el-button
            >
            <el-button size="mini" @click="handleDelGoods(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="tableData.total > 0"
        :total="tableData.total"
        :page.sync="searchForm.start"
        :limit.sync="searchForm.count"
        @pagination="m_getTableData"
      />
    </div>
    <!-- 列表 -->
    <el-dialog
      :title="dialog.title"
      :visible.sync="dialog.dialogVisible"
      :width="dialog.width"
      :before-close="m_handleClose"
    >
      <div class="main">
        <add-form
          v-if="dialog.title === '新增' || dialog.title === '修改'"
          :AEform="AEform"
          @close="close_dialog"
          @submite="submite_dialog"
        ></add-form>
        <up-img
          v-if="dialog.title === '上传图片'"
          :AEform="AEform"
          :path="pathImg"
          @close="close_dialog"
          @submite="submite_dialog"
        ></up-img>
      </div>
    </el-dialog>
    <quill-editor
      ref="text"
      v-model="content"
      class="myQuillEditor"
      :options="editorOption"
    ></quill-editor>
    <el-button type="primary" @click="submithh">提交</el-button>
  </el-card>
</template>


<script>
import { addGoods, goodsList, delGoods, editGoods } from "@/api/product";
import tablePage from "@/mixins/tablePage";
import addForm from "./addForm";
import pagination from "@/components/Pagination";
import upImg from "@/components/upImg/upImg";
import { quillEditor } from "vue-quill-editor";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
export default {
  name: "goodsList",
  mixins: [tablePage],
  components: {
    addForm,
    pagination,
    upImg,
    quillEditor
  },
  data() {
    return {
      content: "",
      editorOption: {},
      // editorOption里是放图片上传配置参数用的，例如：
      // methods: 'post',  // 必填参数 图片上传方式
      // action:  '/api/product/richtext_img_upload.do',  // 必填参数 图片上传地址
      // token: '',  // 可选参数 如果需要token验证，假设你的token有存放在sessionStorage
      // name: 'upload_file',  // 必填参数 文件的参数名
      // size: 500,  // 可选参数   图片大小，单位为Kb, 1M = 1024Kb
      // accept: 'multipart/form-data, image/png, image/gif, image/jpeg, image/bmp, image/x-icon,image/jpg'  // 可选 可上传的图片格式
      searchForm: {
        //搜索数据
        start: 1,
        count: 10
      },
      fn: goodsList,
      AEform: {},
      pathImg: "/v1/w-home/uploadImg",
      tableData: {
        //表格数据
        headList: [
          {
            name: "goodName",
            title: "产品名称"
          },
          {
            name: "price",
            title: "产品价格"
          },
          {
            name: "inventory",
            title: "产品库存"
          }
        ],
        list: [],
        total: 0
      },
      rows: {}, //表行
      multipleSelection: []
    };
  },
  computed: {},
  created() {
    this.m_getTableData();
  },
  methods: {
    submithh() {
      console.log(this.$refs.text.value);
    },
    close_dialog() {
      // 关闭弹框
      this.dialog.dialogVisible = false;
      this.AEform = {};
    },
    submite_dialog(val) {
      // 确认弹框
      this.dialog.dialogVisible = false;
      if (this.dialog.title === "修改") {
        editGoods(val).then(res => {
          this.m_handleFilter();
        });
      } else {
        addGoods(val).then(res => {
          this.m_handleFilter();
        });
      }
      this.AEform = {};
    },
    handleAddGoods() {
      // 新增
      this.dialog.dialogVisible = true;
      this.dialog.title = "新增";
    },
    handleEditGoods(row) {
      // 修改
      this.dialog.dialogVisible = true;
      this.dialog.title = "修改";
      this.AEform = row;
    },
    handleDelGoods(row) {
      // 删除
      delGoods({
        id: row.id
      }).then(res => {
        this.m_handleFilter();
      });
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss">
.goodsList {
}
</style>
